<!-- jquery模态框 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>模态框</title>
    <style>
        .hide {
            display: none;
        }

        .modal {
            width: 400px;
            height: 200px;
            padding: 10px;
            border-radius: 5px;
            position:absolute;
            left: 50%;
            top: 0;
            margin-left: -200px;
            margin-top: -250px;
            z-index: 10;
            background-color: white;
        }

        .shade {
            position: fixed;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            opacity: 0.6;
            background-color: gainsboro;
            z-index: 9;
        }

        p {
            text-align: center;
        }

        .btns{
            float: right;
        }

        .btn1{
            padding: 5px;
            border: none;
            border-radius: 2.5px;
            background-color: #848484;
            line-height: 25px;
            color: white;
            cursor: pointer;
        }

        .btn1:hover{
            border: 1px solid black;
        }

        .btn2{
            padding: 5px;
            border: none;
            border-radius: 2.5px;
            background-color: #027CFF;
            line-height: 25px;
            color: white;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="content">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit id odio provident eligendi eos dignissimos esse
            vitae, non velit sed, dolorem doloremque dolor quos quis illo hic porro magnam? Natus?</p>
    </div>
    <button id="btn">点击激活模态框</button>
    <!-- 模态框 -->
    <div class="modal">
        <h3>Model Title</h1>
        <hr>
        <p>Woohoo,you're reading this text in a modal！</p>
        <hr>
        <div class="btns">
            <button class="btn1">Close</button>
            <button class="btn2">Save changes</button>
        </div>
    </div>
    <!-- 遮罩 -->
    <div class="shade hide"></div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        //弹出模态框
        $('#btn').click(function () {
            $(".shade").removeClass("hide");
            $(".modal").animate({top:'500px'},400);
        });
        //点击遮罩 去除模态框
        $(".shade").click(function(){
            $(".shade").addClass("hide");
            $(".modal").animate({top:'-500px'},200);
        })
        //点击取消按钮 去除模态框和遮罩
        $(".btn1").click(function(){
            $(".modal").animate({top:'-500px'},200);
            $(".shade").addClass("hide");
        })
    </script>
</body>

</html>